<template>
  <div class="home">
    <div class="search-box">
      <van-search  disabled placeholder="请输入商品搜索关键词" @click="toSearch" />
    </div>

    <div class="silder">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="black">
        <van-swipe-item v-for="(item, index) in banner" :key="index"><img :src="item.image_url" alt=""></van-swipe-item>
      </van-swipe>      
    </div>
    
    <div class="channel">
      <van-row >
        <van-col :span="24/channel.length" v-for="item in channel" :key="item.id" @click="$router.push('/category?id='+item.category)">
          <img :src="item.icon_url"  alt="">
          <div>{{item.name}}</div>
        </van-col>

      </van-row>
    </div>

    <div class="brand">
      <div class="link">
        品牌制造商直供
      </div>
      <div class="brand-box">
        <div class="item" v-for="item in brand" :key="item.id" @click="brandSela(item)">
          <img :src="item.pic_url" alt="">
          <div class="container">
            <div class="title">{{item.name}}</div>
            <div class="price">{{item.floor_price | trimCash}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="tipsList">
      <div class="link">
        热门话题
      </div>
      <div class="tipsbox">
        <div class="tipsitem" v-for="item in exquisite" :key="item.id" @click="$router.push('/tipic?id='+item.id)">
          <img :src="item.item_pic_url" alt="">
          <div class="official">
            <div>{{item.title}}</div>
            <div>{{item.subtitle}}</div>
          </div> 
        </div>
        
      </div>
    </div>
    
    <div class="hot">
      <div class="hot-title">
        热卖商品
      </div>
      <GuessYouLike :inpRes="hotGoods" :showTitle="true"/>
    </div>

    <div class="newGoods">
      <div class="newGoods-title">
        最新商品
      </div>
      <GuessYouLike :inpRes="hotGoods" :showTitle="true"/>
    </div>

    <transition name="lz">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src
import GuessYouLike from '@/components/guessLike'
export default {
  name: 'Home',
  data(){
    return {
      banner:[],
      channel:[],
      brand:[],
      exquisite:[],
      hotGoods:[]
    }
  },
  components: {
    GuessYouLike
  },
  mounted(){
    this.getBanner()
    
  },
  methods:{

    // 品牌直供
    brandSela(item){
      this.$router.push('/brand?brandId='+item.id)
    },

   async getBanner(){
     let result =  await this.$api.home.reqBanner()
     if(result.status === 200){
       let {banner,channel,brand,exquisite,hotGoods} = result
       this.banner = banner
       this.channel = channel
       this.brand = brand
       this.exquisite = exquisite
       this.hotGoods = hotGoods
     }
     
    },

    toSearch(){
      this.$router.push('/home/search')
    }
  },

}
</script >

<style lang="less" scoped>
@import './index.less';

</style>
